<template>
  <div class="dy-main InsuranceDealSearch">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">交易查询</x-header>
    </div>
    <div class="dy-body">
      <div class="titleButton">
        <div class="inDiv">
          <div class="default" :class="{'changeSty': changeSing === '1'}" @click="chooseOption('1')">可撤单查询</div>
          <div class="default line" :class="{'changeSty': changeSing === '2'}" @click="chooseOption('2')">委托查询</div>
          <div class="default line" :class="{'changeSty': changeSing === '3'}" @click="chooseOption('3')">历史查询</div>
       </div>
      </div>

      <div class="optionMsg">
        <div class="lineTtitle diff1">基金名称</div>
        <div class="lineTtitle diff2">交易金额</div>
        <div class="lineTtitle" v-if="changeSing === '3'" @click="timeShow = true">自定义<div class="triangle"></div></div>
        <div class="lineTtitle" v-if="changeSing !== '3'">交易日期</div>
      </div>

      <zx-timeRang v-model="timeShow" :timeDate="timeDate" @on-click="setDateVal"></zx-timeRang>

      <div class="optionLists">
        <scroller lock-x height="100%" ref="scroller">
          <div>
            <div class="optionlist" @click="gotoDetail()">
              <div class="optionCell" v-for="(item, index) in Lists" :key="index">
                <div class="prdName">{{ item.RiskName }}</div>
                <div class="payAmount">{{ item.Prem }}</div>
                <div class="dealDate">{{ item.ApplyDate }}</div>
              </div>
            </div>
            <p class="tipMsg">温馨提示：若您有资管计划失败交易，请详询客户经理。</p>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      changeSing: '1',
      timeShow: false,
      timeDate: ['2018-04-05'],
      Lists: [],
      historyList: [],
      cancelList: []
    }
  },
  methods: {
    chooseOption (i) {
      this.changeSing = i
      if (i === '1') {
        this.Lists = this.cancelList
      } else if (i === '2') {
        this.Lists = this.historyList
      } else {
        this.Lists = this.historyList
      }
    },
    gotoDetail () {
      if (this.changeSing === '1') {
        this.$router.push({name: 'InsuranceOrderCancelQuery'})
      } else {
        this.$router.push({name: 'InsuranceOrderHistroyQuery'})
      }
    },
    getDealSearchData () {
      let self = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'InsuranceDealSearch'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            self.Lists = response.data.data[0].arraysC
            self.historyList = response.data.data[0].arraysH
            self.cancelList = response.data.data[0].arraysC
          } else {
            alert('fail')
          }
        }
      )
    },
    setDateVal (val) {
      this.timeDate = val
      console.log(this.timeDate)
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  created () {
    this.Lists = this.historyList
    this.getDealSearchData()
  }
}
</script>

<style lang="less">
.InsuranceDealSearch{
  .dy-body{
    .titleButton{
      padding: 0.5rem 0.75rem 0.5rem 0.76rem;
      border-bottom: 1px solid #EAEAEA;
      .inDiv{
        display: flex;
        border: 1px solid #EC1B30;
        border-radius: 0.06rem;
      }
      .default{
        background: #EC1B30;
        color: #fff;
        width: 2rem;
        font-size: 0.28rem;
        text-align: center;
        padding: 0.1rem 0;
      }
      .line{
        border-left: 1px solid #fff;
      }
      .changeSty{
        background: #fff;
        color: #EC1B30;
      }
    }
    .optionMsg{
      height: 7%;
      display: flex;
      color: #999999;
      .lineTtitle{
        line-height: 0.88rem;
        font-size: 0.26rem;
        .triangle{
          display: inline-block;
          position: relative;
          top: 0.1rem;
          width: 0;
          height: 0;
          border-top: 0.13rem solid #999999;
          border-right: 0.13rem solid transparent;
          border-bottom: 0.13rem solid transparent;
          border-left: 0.13rem solid transparent;
          border-radius: 0.06rem;
        }
      }
      .diff1{
        margin-left: 0.29rem;
        margin-right: 2.62rem;
      }
      .diff2{
        margin-right: 0.77rem;
      }
    }
    .optionLists{
      width: 100%;
      height: 79%;
      .optionlist{
        background: #fff;
        margin: 0 auto;
        .optionCell{
          display: flex;
          height: 1.2rem;
          width: 92%;
          margin-left: 0.3rem;
          border-bottom: 1px solid #F7F8FA;
          .prdName{
            font-size: 0.28rem;
            color: #333333;
            font-weight: bolder;
            line-height: 1.2rem;
            width: 53%;
            overflow: hidden;
          }
          .payAmount{
            font-size: 0.28rem;
            color: #ff6633;
            line-height: 1.2rem;
            width: 26%;
          }
          .dealDate{
            color: #999999;
            font-size: 0.26rem;
            line-height: 1.2rem;
          }
        }
      }
      .tipMsg{
        height: 0.88rem;
        font-size: 0.26rem;
        color: #999999;
        padding: 0.39rem 0 0.8rem 0.28rem;
        background: #F7F8FA;
      }
    }
  }
}
</style>
